<template>
  <div class="img-con flex-between">
    <div class="item-con">
      <div class="img-item flex-center">
        <!-- 主动模式 -->
        <!-- <div
          v-if="imgUrl && isShowUpload"
          class="img-bg"
          :style="{ backgroundImage: `url(${imgUrl})` }"
        ></div> -->
        <!-- <d-player
          v-if="isShowUpload"
          ref="player"
          class="video"
          :options="videoOptions"
          @play="play"
        ></d-player> -->
        <!-- 主动模式 -->
        <div
          v-if="imgUrlZD && isShowUpload"
          class="img-bg"
          :style="{ backgroundImage: `url(${imgUrlZD})` }"
          @dblclick="previewImg({ imageUrl: imgUrlZD })"
        ></div>
        <!-- 被动模式 -->
        <div
          v-if="imgUrlBD && !isShowUpload"
          class="img-bg"
          :style="{ backgroundImage: `url(${imgUrlBD})` }"
          @dblclick="previewImg({ imageUrl: imgUrlBD })"
        ></div>
        <template
          v-if="(!imgUrlBD && !isShowUpload) || (!imgUrlZD && isShowUpload)"
        >
          <el-upload
            ref="upload"
            class="upload-demo"
            :action="baseURL"
            :on-success="upSuccess"
            :before-upload="beforeUpload"
            :show-file-list="false"
            :auto-upload="true"
            :data="uploadOtherData"
            :disabled="!isShowUpload"
          >
            <div
              class="img-bg"
              :style="{ backgroundImage: `url(${imgUrlNP})` }"
            ></div>
          </el-upload>
        </template>
        <!-- <div
          v-if="(!imgUrlBD && !isShowUpload) || (!imgUrlZD && isShowUpload)"
          class="img-bg"
          :style="{ backgroundImage: `url(${imgUrlNP})` }"
        ></div> -->
      </div>
      <!-- <div class="control">
        <el-button size="small" type="primary" @click="!isPlayVideo">{{
          isPlayVideo ? "暂停" : "播放"
        }}</el-button>
      </div> -->
      <!--<div class="time-wrap flex-between">
        <div class="time">2020-11-10 09:20</div>
        <el-upload
          ref="upload"
          class="upload-demo"
          :action="baseURL"
          :on-success="upSuccess"
          :before-upload="beforeUpload"
          :show-file-list="false"
          :auto-upload="true"
          :data="uploadOtherData"
        >
          <el-button v-if="isShowUpload" size="small" type="primary"
            >上传本地文件</el-button
          >
        </el-upload>
      </div>
      -->
    </div>
    <el-dialog width="100%" title="预览" :visible.sync="dialogVisible">
      <div class="preview-wrap">
        <img class="preview" :src="previewImgSRC" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
let loading = null;
// import VueDPlayer from "vue-dplayer";
// import "vue-dplayer/dist/vue-dplayer.css";
export default {
  components: {
    // "d-player": VueDPlayer,
  },
  props: {
    flag: {
      default: () => "1",
    },
    isShowUpload: {
      default: () => false,
    },
  },
  computed: {
    uploadOtherData() {
      return {
        sessionId: this.sessionId,
        // flag: this.flag,
      };
    },
  },
  data() {
    return {
      videoOptions: {
        // autoplay: true,
        // mutex: false,
        // muted: true,
        // volume: 0,
        preload: "metadata",
        // video: {
        //   // url: "",
        //   autoplay: true,
        //   muted: true,
        //   type: "auto",
        //   volume: 0.1,
        // },
        contextmenu: ["123"],
      },
      sessionId: "",
      imgUrlZD: "",
      imgUrlBD: "", // 被动处理模式
      imgUrlNP: require("@/assets/images/no_photo.png"),
      baseURL: `${process.env.VUE_APP_BASE_URL}/activeMp4`,
      //   isPlayVideo: true,
      dialogVisible: false,
      previewImgSRC: "",
    };
  },
  created() {
    var ws = new WebSocket(`${process.env.VUE_APP_SOCKET_IP}/websocket`);
    ws.onopen = () => {
      ws.send(`{"passiveVideo":"passiveVideo"}`);
    };
    ws.onmessage = (e) => {
      let data = JSON.parse(e.data);
      console.log("websocket链接成功,图片视频模式", data);
      if (data.event === "sessionId") {
        this.sessionId = data.data.sessionId;
      } else if (data.event === "base64") {
        this.imgUrlBD = "data:image/png;base64," + data.data.base64;
      } else if (data.event === "base64Active") {
        console.log(
          "websocket链接成功,图片视频模式---base64Active",
          data.data.base64
        );
        this.imgUrlZD = "data:image/png;base64," + data.data.base64;
        // loading.close();
      } else if (data.event === "coordinate") {
        // data.data.coordinate[3] = Math.random();
        this.$store.commit("getCoordinate", data.data.coordinate);
      }
    };
    ws.onclose = function () {
      console.log("closed...");
    };
    ws.onerror = function () {
      console.log(this.readyState);
    };
  },
  methods: {
    previewImg(item) {
      this.dialogVisible = true;
      this.previewImgSRC = item.imageUrl;
    },
    play() {
      console.log("play callback");
    },
    upSuccess(data) {
      loading.close();
      console.log(123, data);
      // this.videoOptions.video.url = this.videoOptions.video.url + data;
      // const player = this.$refs.player.dp;
      // let url = `${process.env.VUE_APP_BASE_URL}/getVideo?videoPath=${data}`;
      // console.log(456, this.$refs.player.dp, url);
      // player.switchVideo({
      //   url: url,
      // });
    },
    beforeUpload() {
      loading = this.$loading({
        lock: true,
        text: "努力上传中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    submit() {
      this.$refs.upload.submit();
    },
  },
};
</script>

<style lang="scss" scoped>
.img-con {
  padding-bottom: 0.3rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
  .img-item {
    // width: 10.66rem;
    // height: 6rem;
    width: 11.76rem;
    height: 6.62rem;
    .img-bg {
      width: 11.76rem;
      height: 6.62rem;
      // width: 100%;
      // height: 100%;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
    .video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
<style lang="scss" scoped>
.time-wrap {
  margin-top: 20px;
  // justify-content: flex-end;
  .time {
    // margin-left: 10px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #00d8f5;
    line-height: 37px;
  }
}
// .control {
//   float: left;
//   width: 50%;
//   margin-top: 20px;
//   text-align: left;
// }
.upload-demo {
  width: 11.76rem;
  height: 6.62rem;
  margin-top: 0.2rem;
  text-align: right;
}
</style>